<template>
  <div>
    <search></search>
    <van-tabs v-model:active="active" @click-tab="onClickTab">
      <van-tab title="推荐">
        <swipe></swipe>
      </van-tab>
      <van-tab title="美食"></van-tab>
      <van-tab title="运动"></van-tab>
      <van-tab title="保健品">保健品</van-tab>
      <van-tab title="内衣">内衣</van-tab>
      <van-tab title="更多">更多</van-tab>
    </van-tabs>
    <van-tabs v-model:active="active" @click-tab="onClickTab">
      <van-tab title="推荐">
        <swipe></swipe>
      </van-tab>
      <van-tab title="全球直购"></van-tab>
      <van-tab title="正品保障"></van-tab>
      <van-tab title="售后无忧">保健品</van-tab>
      <van-tab title="假一赔十">内衣</van-tab>
    </van-tabs>

    <p class="box">
      <b>限时购</b>
      <van-count-down :time="time" format="35 : 15 : 55 " />
      <span>每天十点</span>
      <span>限时限量</span>
    </p>
    <van-grid :border="false" :column-num="4">
      <van-grid-item>
        <van-image
          src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
        />
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
        />
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
        />
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
        />
      </van-grid-item>
    </van-grid>
    <div class="box1">
      <span>福利社</span>

      <span class="span">大牌跨店满减</span>
      <van-grid :border="false" :column-num="4">
        <van-grid-item>
          <van-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
          />
        </van-grid-item>
        <van-grid-item>
          <van-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
          />
        </van-grid-item>
        <van-grid-item>
          <van-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
          />
        </van-grid-item>
        <van-grid-item>
          <van-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
          />
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script setup>
import search from "@/components/search.vue";
import swipe from "@/components/swipe.vue";
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  b {
    font-size: 14px;
    margin: 0 5px;
  }
  span {
    font-size: 14px;
    margin: 0 5px;
    color: #999;
  }
}
</style>